<template>
  <div class="content">
      <ul class="flex-box">
        <li><span>支付密码：</span></li>
        <li><input maxlength="6" v-model="passwd" type="password" placeholder="请输入旧的支付密码"></li>
        <li><img v-if="isShow" @click="empty()" class="more-icon" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
      <div class="tc"><button ref="btn" class="common-btn" @click="next()">下一步</button></div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      isShow: false,
      passwd: '',
      pwd_token: ''
    }
  },
  methods: {
    next () {
      var pwd_token
      this.$apiPost(`check_paypwd`, {'passwd': this.passwd}
            ).then((data) => {
              this.pwd_token =  data.data.pwd_token
              if (data.status === 0) {
                this.$router.push({ name: 'update_pwd', params: { 'pwd_token': this.pwd_token}})
              } else {
                MessageBox.alert('密码输入错误，请重新输入', '提示')
                this.passwd = ''
              }
            })
      },
    empty () {
      this.passwd = ''
    }
  },
  watch: {
    passwd (newM, oldM) {
      if (newM.length > 0) {
        this.isShow = true
        this.$refs.btn.style.opacity = '1'
      } else {
        this.isShow = false
        this.$refs.btn.style.opacity = '0.5'
      }
    }
  }
}
</script>
<style scoped>
</style>
